<template>
  <div class="div-clock">
    <div class="time">{{timeText}}</div>
    <div class="time">{{dateText}}</div>
  </div>
</template>
<script>

  // import Request from '@/common/js/Request'

  export default {
    data() {
      return {
        timeText: this.formatTime(new Date()),
        dateText: this.formatDate(new Date()),
      }
    },
    created: function () {
      setInterval(()=>{
        this.timeText = this.formatTime(new Date())
        this.dateText = this.formatDate(new Date())
      },1000)
    },
    methods: {
       formatTime : date => {
        let year = date.getFullYear().toString()
         let month = (date.getMonth() + 1).toString()
         let day = date.getDate().toString()
         let hour = date.getHours().toString()
         let minute = date.getMinutes().toString()
         let second = date.getSeconds().toString()

         year = year[1]?year:'0'+year
         month = month[1]?month:'0'+month
         day = day[1]?day:'0'+day
         hour = hour[1]?hour:'0'+hour
         minute = minute[1]?minute:'0'+minute
         second = second[1]?second:'0'+second

        return [hour, minute, second].join(':')
      },

      formatDate : date => {
        let year = date.getFullYear().toString()
        let month = (date.getMonth() + 1).toString()
        let day = date.getDate().toString()
        let hour = date.getHours().toString()
        let minute = date.getMinutes().toString()
        let second = date.getSeconds().toString()

        year = year[1]?year:'0'+year
        month = month[1]?month:'0'+month
        day = day[1]?day:'0'+day
        hour = hour[1]?hour:'0'+hour
        minute = minute[1]?minute:'0'+minute
        second = second[1]?second:'0'+second

        return [year, month, day].join('-')
      },


    }
  }

</script>

<style>

  .div-clock{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-right: 4vw;

  }

  .time{
    display: flex;
    justify-content: center;
    /*font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;*/
    color: white;
    font-size: 1.6vh;
    line-height: 2.2vh;
    /*border-bottom: 1px solid #606266;*/
  }

</style>
